<!--
 * @Description: 线索详情
 * @Author: lixianggang
 * @Date: 2022-11-10 13:38:51
 * @LastEditors: lixianggang
 * @LastEditTime: 2023-01-12 16:11:40
-->
<template>
    <div class="page-wrap" v-loading="pageLoading">
        <div class="header-btn">
            <div class="header-left">
                <div>线索详情</div>
                <el-select placeholder="请选择旅程阶段" v-model="flowId" @change="queryDetail">
                    <el-option v-for="item in flowNameList" :key="item.flowId" :value="item.flowId"
                        :label="item.flowName" />
                </el-select>
            </div>
            <div>
                <el-button type="info" plain @click="goBack">返回</el-button>
            </div>
        </div>
        <div class="wrap g-card">
            <div class="right-btn">
                <el-button type="primary" @click="createClue('1')" icon="el-icon-plus"
                    v-hasPermi="['admin:journey:config:add']">创建通用线索</el-button>
            </div>
            <div class="base-set ml20">
                <el-steps :active="4" align-center>
                    <el-step v-for="(item, index) in followList" :key="item.flowNodeId">
                        <template slot="icon">
                            <svg-icon icon-class="step_circle" />
                        </template>
                        <template slot="description">
                            <div class="step-item" v-infinite-scroll-arg:[index]="loadInfiniteData"
                                :infinite-scroll-disabled="item.pageDisabled" infinite-scroll-immediate="false"
                                infinite-scroll-distance="1">
                                <div class="item-title">{{ item.flowNodeName }}</div>
                                <div class="item-sub">共{{ item.total }}个线索</div>
                                <div class="item-add" @click="createClue('0', item)">
                                    <svg-icon icon-class="add_gray" />
                                </div>
                                <div class="item-card" v-for="subitem in item.resultList" :key="subitem.id">
                                    <div class="card-top">
                                        <div class="top-info">
                                            {{ subitem.sendTypeName }}
                                        </div>
                                        <div>
                                            <el-dropdown>
                                                <span class="el-dropdown-link">
                                                    <svg-icon icon-class="ellipsis" @click="editVisible = true"
                                                        v-hasPermi="['admin:journey:config:add']" />
                                                </span>
                                                <el-dropdown-menu slot="dropdown">
                                                    <el-dropdown-item>
                                                        <el-button type="text" @click="createClue('2', item, subitem)"
                                                            v-hasPermi="['admin:journey:config:edit']">编辑</el-button>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <el-button type="text" @click.native="copyText(subitem)"
                                                            v-hasPermi="['admin:journey:config:copy']">复制</el-button>
                                                    </el-dropdown-item>
                                                    <el-dropdown-item>
                                                        <el-button type="text" @click="deleteTask(subitem)"
                                                            v-hasPermi="['admin:journey:config:remove']">删除</el-button>
                                                    </el-dropdown-item>
                                                </el-dropdown-menu>
                                            </el-dropdown>
                                        </div>
                                    </div>
                                    <div class="card-time">
                                        {{ subitem.sendDay }}天后 {{ subitem.sendTime }} 发送
                                    </div>
                                    <div class="card-description">
                                        {{ subitem.content }}
                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-step>
                </el-steps>
            </div>
        </div>
    </div>
</template>

<script>
import { getFlowNameList, getFlowDetailList, getFlowNodeList, getFlowDetailPage, deleteJourneyTask } from "@/api/operate/automarket"
export default {
    data() {
        return {
            flowId: this.$route.query.flowId,
            pageLoading: true,
            flowNameList: [],
            followList: [],
        }
    },
    computed: {
        infiniteDisabled() {
            return this.pageLoading
        }
    },
    methods: {
        goBack() {
            this.$router.back()
        },
        createClue(type, item, subitem) {
            this.$router.push({
                path: "CreateClueTask",
                query: {
                    flowId: this.flowId,
                    flowNodeId: item?.flowNodeId,
                    flowNodeName: item?.flowNodeName,
                    // 1通用线索 0专用线索
                    type,
                    id: subitem?.id
                }
            })
        },
        copyText(subitem) {
            navigator.clipboard.writeText(subitem.content).then(() => {
                this.$message({ message: '复制成功', type: 'success' })
            });
        },
        loadInfiniteData(index) {
            const item = this.followList[index]
            this.followList[index].pageDisabled = true
            if (item.total <= 5 || item.total < item.pageNum * 5) return
            this.pageLoading = true
            const param = {
                flowId: this.flowId,
                flowNodeId: item.flowNodeId,
                pageSize: 5,
                pageNum: item.pageNum + 1
            }
            this.pageLoading = true
            getFlowDetailPage(param)
                .then(res => {
                    if (res.code === 200) {
                        this.followList[index].resultList.push(...res.data.rows)
                        this.followList[index].pageNum++
                    }
                })
                .finally(() => {
                    this.pageLoading = false
                    this.followList[index].pageDisabled = false
                })
        },
        deleteTask(item) {
            this.pageLoading = true
            deleteJourneyTask(item.id)
                .then(res => {
                    if (res.code === 200) {
                        this.$message.success(res.msg || "操作成功")
                        this.queryDetail()
                    }
                    this.pageLoading = false
                })
                .catch(err => {
                    this.pageLoading = false
                })
        },
        async queryDetail() {
            try {
                this.pageLoading = true
                const param = {
                    flowId: this.flowId,
                    pageSize: 5
                }
                let detailList = []
                let detailRes = await getFlowDetailList(param)
                if (detailRes.code === 200) {
                    detailList = detailRes.data
                    detailList.forEach(element => {
                        element.pageNum = 1
                        element.pageDisabled = false
                    });
                }

                let flowNodeList = await getFlowNodeList(this.flowId)
                if (flowNodeList.code === 200) {
                    const resData = flowNodeList.data
                    resData.forEach((element, index) => {
                        console.log(detailList, element.flowNodeId)
                        const nodeItem = detailList.filter(item => item.flowNodeId === element.flowNodeId)
                        console.log(nodeItem)
                        if (nodeItem.length >= 1) {
                            // nodeItem[0].flowNodeName = element.flowNodeName
                            resData[index] = nodeItem[0]
                        } else {
                            element.resultList = []
                            element.total = 0
                        }
                    })
                    this.followList = resData
                }

                this.pageLoading = false
            } catch (error) {
                this.pageLoading = false

            }
        },
        async init() {
            try {
                this.pageLoading = true
                let res = await getFlowNameList()
                res.code === 200 && (this.flowNameList = res.data)
                this.queryDetail()
            } catch (error) {
                this.pageLoading = false
            }
        }
    },
    mounted() {
        this.init()
    }
}
</script>

<style lang='scss' scoped>
@import "@/styles/base.scss";

.page-wrap {
    .header-btn {
        @include headerBtn;
        margin-bottom: 16px;
    }

    .wrap {
        @include titleWrap;
    }

    .header-left {
        display: flex;

        .el-select {
            margin-left: 16px;
        }
    }

    .base-set {
        ::v-deep .el-steps {
            .el-step {
                flex-basis: 25% !important;
                max-width: 25% !important;
                flex-shrink: 0;

                .el-step__description {
                    padding-left: 0%;
                    padding-right: 2%;
                }

                .is-finish {
                    color: #BBBBBB;
                }
            }

            .el-step__head.is-finish {
                color: #FB9981;
                border-color: #FB9981;
            }

            .el-step__icon.is-text {
                border: 0;
                width: fit-content;

                svg {
                    width: 20px;
                    height: 20px;
                }
            }

            .el-step__line {
                background-color: #FB9981;
            }
        }


        .step-item {
            margin-top: 20px;
            background: #F6F6F6;
            border-radius: 4px;
            // padding: 16px 16px 0;
            padding: 16px;
            height: 600px;
            overflow-y: auto;
            margin-right: 20px;
            overflow-x: scroll;
            text-align: left;

            svg {
                width: 20px;
                height: 20px;
            }

            .item-title {
                font-size: 18px;
                font-weight: 600;
                color: #2A2A2A;
                line-height: 25px;
            }

            .item-sub {
                font-size: 14px;
                color: #999999;
                line-height: 20px;
                margin-top: 5px;
            }

            .item-add {
                border: 1px dashed #ccc;
                border-radius: 6px;
                padding: 10px 0px;
                text-align: center;
                margin: 16px 0;
                cursor: pointer;
            }

            // .infinite-style {
            //     height: 500px;
            //     overflow: auto;
            // }

            .item-card {
                background: #FFFFFF;
                border-radius: 6px;
                padding: 14px;
                // margin-top: 16px;
                margin: 16px 0;

                .card-top {
                    display: flex;
                    justify-content: space-between;

                    .top-info {
                        font-size: 14px;
                        font-weight: 500;
                        color: #2A2A2A;
                    }

                    .el-dropdown-link {
                        cursor: pointer;
                    }
                }

                .card-time {
                    margin: 0 0 10px;
                }

                .card-description {
                    font-size: 12px;
                    color: #999999;
                }
            }
        }
    }
}
</style>